<template>
	<view id="app" class="bgw">
		<view class="ver pt100">
			<view class="logo">
				<image :src="logo"></image>
			</view>
			<view class="center"></view>
			<view class="mifeng">
				<image :src="mifeng"></image>
			</view>
			<view class="center"></view>
			<view class="btn" v-if="agree">
				<uv-button color="#145cfe" iconColor="#fff"  open-type="chooseAvatar" @chooseavatar="avataraction" text="授权登录" v-if="step==0"></uv-button>
				<uv-button color="#145cfe" iconColor="#fff"   open-type="getPhoneNumber" @getphonenumber="mobilelogin" text="授权登录" v-if="step==1"></uv-button>
			</view>
			<view class="btn" v-else>
				<uv-button color="#145cfe" iconColor="#fff" @click="showAgree()" text="授权登录"></uv-button>
			</view>
			<view class="canshu">
				<view class="box" @click="Agree()">
					<uv-icon name="checkbox-mark" size="28rpx" color="#145cfe" v-if="agree"></uv-icon>
				</view>
				<view class="content">
					我已阅读并同意<navigator url="/pages/index/textview?type=cate&id=2" class="link dib" hover-class="none">《用户服务协议》
										</navigator>和<navigator url="/pages/index/textview?type=cate&id=2" class="link dib" hover-class="none">《用户隐私政策》
										</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				mifeng:this.util.config.host+'/static/images/logo.jpg',
				logo:this.util.config.host+'/static/images/logofull.png',
				step:0,
				avatarUrl:"",
				agree:false,
			}
		},
		onLoad(){
			that = this;
			this.step=0;
			this.agree=false;
			this.avatarUrl ="";
		},
		onShow(){
			
		},
		methods: {
			getToken(e){
				return this.request({url:"/api/common/qntoken",data:{'file':e.avatarUrl}});
			},
			 async avataraction (e){
				let res = await this.getToken(e);
				console.log(res);
				this.qnUpload.upload(e.avatarUrl,function(rlt){
					console.log(rlt);
					that.avatarUrl = res.data.cdnurl+rlt.imageURL;
					console.log(that.avatarUrl);
					that.step = 1;
				},function(e){
					console.log(e);
				},{
					region: 'NCN',
					uptoken: res.data.token,
					key:res.data.filename,
				});
			},
			mobilelogin:function(e){
				console.log(e);
				if(e.errMsg =="getPhoneNumber:ok"){
					
					let pid = 0;
					if(uni.getStorageSync('QLXG_pid')){
						pid = uni.getStorageSync('QLXG_pid')
					}
					let openid = uni.getStorageSync('QLXG_openid');
					// 请求接口
					that.request({
						url: '/api/mpwechat/login',
						data: {code:e.code,pid:pid,openid:openid,avatar:that.avatarUrl,level:2},
						load: 1,
						success(rlt) {
							if (rlt.code == 200) {
								that.alert('登录成功')
								// 清空缓存的邀请码
								uni.setStorageSync('QLXG_openid', rlt.data.openid);
								uni.setStorageSync('QLXG_userinfo',rlt.data);
								uni.setStorageSync('QLXG_token',rlt.data.token);
								
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							} else {
								// 弹窗提示
								that.alert(rlt.msg)
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							}
						},
					})
				}else{
					that.alert('您拒绝了授权');
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				}
			},
			showAgree:function(){
				this.util.alert({
					title:"隐私及服务协议",
					value:"请阅读协议并点击同意"
				})
			},
			Agree:function(){
				this.agree = !this.agree;
			}
		}
	}
</script>

<style lang="less" scoped>
	.logo{width:320rpx; height:90rpx;}
	.mifeng{width:360rpx;height:360rpx;}
	.center{height:40rpx;}
	.btn{width:480rpx;}
	.canshu{width:480rpx;font-size: 22rpx; color:#8c8c8c; padding: 20rpx 0;display: flex; flex-direction: row;
		.box{width:30rpx; height:30rpx;border: 1px solid #ccc;display: flex; align-items: center; border-radius: 5rpx; margin-right: 10rpx;}
		.content{flex:1;
		.link{display: inline;color: #145cfe;}
		}
	}
</style>
